<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

// cesium的默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);
onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, // 水纹效果  海里面有波浪的效果
      requestVertextNormal: true, // 光照效果
    }),

    /**
     * 下载数据源： 地理空间数据云
     * https://www.gscloud.cn/sources/index?pid=302&ptitle=DEM%20%E6%95%B0%E5%AD%97%E9%AB%98%E7%A8%8B%E6%95%B0%E6%8D%AE&rootid=1
     * 数据资源 -> DEM数字高程数据 -> GDEMV3 30M 分辨率数字高程数据
 -> 经度 113.5 -> 纬度 23.5 -> 点击下载
     * 数据转换 https://www.cesiumlab.com/ 下载指定的工具exe解压
     * 生成目标数据 下载地址 https://www.cesiumlab.com/downcenter.html
     * CesiumLab地理信息基础数据处理平台v3.0.4版本
     * 选择 地形切片 -> 输入文件 -> 处理参数 【三角算法】vcg -> 输出文件 【存储类型】紧凑pak --> 提交处理  -> 等待十几分钟 即可
     */

    // 仅仅加载指定地区的数据
    // terrainProvider: Cesium.createWorldTerrain({
    //   // url: './terrains/gz'
    // }),
    //信息窗口
    infoBox: false,
    // //显示查询按钮
    // // geocoder: false,
    // //home按钮
    // // homeButton: false,
    // // 控制查看器的显示模式-地球/平面
    // sceneModePicker: true,
    // // 是否显示图层选择
    // baseLayerPicker: false,
    // //帮助按钮
    // navigationHelpButton: false,
  });

  // 将经纬度转换为笛卡尔坐标系
  // const cartesian3 = Cesium.Cartesian3.fromDegrees(89.5, 20.4, 100);
  // console.log(cartesian3);
  // 将经纬度转换为笛卡尔坐标系
  // const cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
  // console.log(cartographic);

  // 广州塔位置
  const gzPosi = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000);
  // flyTo ，让相机飞往某地方
  // viewer.camera.flyTo({
  //   destination: gzPosi,
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0),
  //     pitch: Cesium.Math.toRadians(-80.0),
  //     roll: 0,
  //   },
  //   duration: 10,
  // });

  // 添加3D建筑
  const building = viewer.scene.primitives.add(new Cesium.createOsmBuildings());

  // 添加3D模型
  const airplan = viewer.entities.add({
    name: 'airplan',
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 700),
    // API https://cesium.com/learn/cesiumjs/ref-doc/ModelGraphics.html
    model: {
      uri: './model/bird.glb',
      minimumPixelSize: 128, // 最小像素
      silhouetteSize: 2, //轮廓
      silhouetteColor: Cesium.Color.WHITE, //轮廓的颜色
      // 设置相机距离模型多远的距离 显示该模型 api https://cesium.com/learn/cesiumjs/ref-doc/ModelGraphics.html
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        0,
        200 * 1000
      ),
    },
  });

  // 相机直接定位到指定的物体上
  // viewer.zoomTo(viewer.entities);
  // 相机 飞到指定的物体上
  viewer.flyTo(viewer.entities);

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
